<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="element-plus/index.css">
		<script src="element-plus/index.full.js"></script>
	</head>
	<body>
		<div id='app'>
			<!-- 卡片组件 -->
			<el-card style="width: 500px;margin: 50px auto;">
				<el-form label-width='100' :rules='rules' :model='form' ref='registerForm'>
					<el-form-item label='用户名' prop='user'>
						<el-input v-model='form.user' placeholder='请输入用户名'></el-input>
					</el-form-item>
					<el-form-item label='密码' prop='psw'>
						<el-input v-model='form.psw' type='password' placeholder='请输入密码'></el-input>
					</el-form-item>
					<el-form-item label='确定密码' prop='repsw'>
						<el-input v-model='form.repsw' type='password' placeholder='请再次输入密码'></el-input>
					</el-form-item>
					<el-form-item label='邮箱' prop='email'>
						<el-input v-model='form.email' placeholder='请输入邮箱'></el-input>
					</el-form-item>
					<el-form-item label='性别' prop='sex'>
						<el-radio-group v-model='form.sex'>
							<el-radio :value='1'>男</el-radio>
							<el-radio :value='2'>女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label='兴趣爱好' prop='hobby'>
						<el-checkbox-group v-model='form.hobby'>
							<el-checkbox value='唱歌'>唱歌</el-checkbox>
							<el-checkbox value='运动'>运动</el-checkbox>
							<el-checkbox value='绘画'>绘画</el-checkbox>
							<el-checkbox value='摄影'>摄影</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label='出生日期' prop='birth'>
						<el-date-picker value-format='YYYY-MM-DD' v-model='form.birth' placeholder='请选择日期'></el-date-picker>
					</el-form-item>
					<el-form-item label='城市' prop='city'>
						<el-select v-model='form.city' placeholder='选择城市'>
							<el-option value='重庆'>重庆</el-option>
							<el-option value='上海'>上海</el-option>
							<el-option value='北京'>北京</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type='primary'>注册</el-button>
						<el-button @click="reset">重置</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<script>
			Vue.createApp({
				data() {
					return{
						form:{  //表单数据
							user:'',
							psw:'',
							repsw:'',
							email:'',
							sex:'',
							hobby:[],
							birth:'',
							city:''
						},
						rules:{  //校准规则
							user:[
								{required:true,message:'请输入用户名',trigger:'blur'}  //不能为空
							],
							psw:[
								{required:true,message:'请输入密码',trigger:'blur'},
								{min:6,message:'密码不能少于六位',trigger:'blur'}
							],
							repsw:[
								{required:true,message:'请输入密码',trigger:'blur'},
								{validator:this.confirmPsw,trigger:'blur'}
							],
							email:[
								{required:true,message:'请输入邮箱',trigger:'blur'},
								{type:'email',message:'请输入合法的邮箱',trigger:['blur','change']}
							],
							sex:[
								{required:true,message:'请选择性别',trigger:'blur'}
							],
							hobby:[
								{required:true,message:'请选择兴趣爱好',trigger:'blur'}
							],
							birth:[
								{required:true,message:'请选择出生日期',trigger:'blur'}
							],
							city:[
								{required:true,message:'请选择城市',trigger:'blur'}
							]
						}
					}
				},
				methods:{
					reset(){
						this.$refs.registerForm.resetFields();
					},
					submit(){
						//通过校准规则 提交数据
						this.$refs.registerForm.validate(result=>{
							// result  校准结果
							if (result) {  //通过校准
								alert('提交数据')
							}else{
								// 未通过校准
							}
						})
					},
					confirmPsw(rule,value,callback){  //确定密码的规则
						if (value == this.form.psw) {
							callback()
						} else{
							callback(new Error('两次密码输入不一致'))
						}
					}
				}
			}).use(ElementPlus).mount('#app')
		</script>
	</body>
</html>